<template>
	<section class="keyboard-wrap" v-show="visible">
		<div class="keyboard-number">
			<span v-for="(n , $key) in numbers" v-if="$key !== 9" @click="setNumber($key)">{{n}}</span>
			<span class="opt"></span>
			<span @click="setNumber(9)" >{{'' + numbers[9] || ''}}</span>
			<span class="opt" @click="keyboardBack"><img src="../../assets/image/keyboard_back.png"></span>
		</div>
	</section>
</template>

<script type="text/javascript">
	export default {
		props: {
			cancelText: {
				type: String,
				default: ''
			},

			visible: {
				type: Boolean,
				default: true
			}
		},

		data() {
			let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];

			// function getNumber() {
			// 	var n = Math.floor(Math.random() * 10);
			// 	if (numbers.indexOf(n) < 0) {
			// 		numbers.push(n);
			// 	} else {
			// 		getNumber();
			// 	}
			// }

			// for (var i = 0; i < 10; i++) {
			// 	getNumber();		
			// }
			
			return {
				numbers: numbers
			}
		},

		methods: {
			setNumber(n) {
				if (this.numbers[n] !== undefined) {
					this.$emit('set-number', '' + this.numbers[n]);
				}
			},

			keyboardBack() {
				this.$emit('keyboard-back');
			}
		}
	}
</script>

<style type="text/css" lang="scss">
	.keyboard-wrap {
		width: 100%;
		height: 216px;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: -1px;

		.keyboard-number {
			display: flex;
			flex-wrap: wrap;

			span {
				width: 5rem;
				height: 54px;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 29px;
				color: #030303;
				border-bottom: 1px solid #ccc;
				border-right: 1px solid #ccc;

				&:nth-child(3n) {
					border-right: none;
				}

				&.opt {
					background: #D1D5DB;

					&:active {
						background: #D1D5DB;
						opacity: .7;
					}
					
				}

				&:active {
					background: #efefef;
				}

				img {
					width: 22px;
				}
			}
		}
	}
</style>